<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../css/app.css" />
	</head>
	<style>
		.head-part {
			padding-top: 10px;
		}
		.head-part #auther {
			height: 30px;
			line-height: 30px;
			margin-left: 70px;
		}
		.head-part #currentDate {
			height: 30px;
			width: 300px;
			line-height: 30px;
			margin-left: 70px;
			font-size: 14px;
		}
		.head-part .about-type {
			float: right;
			margin-right: 10px;
			text-align: right;
			text-overflow:ellipsis;
			overflow:hidden;
			white-space:nowrap; 
			width: 100px;
			color: red;
		}
		#headImage {
			width: 60px;
			height: 60px;
			border-radius: 30px;
			display: block;
			position: absolute;
			float: left;
		}
		#titleConcent {
			height: 110px;
		}
		#mainImage {
			padding-right: 10px;
			width: 100px;
			height: 100px;
			float: right;
		}
		#titleConcent1 {
			margin-top: 10px;
			height: 100px;
			text-overflow:ellipsis;
			overflow:hidden;
			line-height: 25px;
		}
		.mui-table-view {
			padding-left: 10px;
		}
		.tableView-cell {
			list-style-type: none;
			/*设置下边框样式*/
			border-bottom-style: solid;
			border-bottom-width: 1px;
			border-bottom-color: #D3D3D3;
		}
		.mui-table-view:before{
			0px;
		}
		.mui-table-view:after{
			0px;
		}
	</style> 
	<body style="background-color: #D3D3D3;">
		<!--下拉刷新容器-->
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<!--数据列表-->
				<ul class="mui-table-view mui-table-view-chevron">
					
				</ul>
			</div>
		</div>
	</body>
	<script src="../js/mui.js" ></script>
	<script src="../js/tools.js" ></script>
	<script type="text/javascript" charset="utf-8">
	
		var pageIndex = 1;  // 页数
		var allPages = 1;   // 总页数
		var revData = null; // 缓存数据
	
		var table = document.body.querySelector('.mui-table-view');
		
	
		mui.init({
			pullRefresh: {
				container: '#pullrefresh',
				down: {
					callback: pulldownRefresh
				},
				up: {
					contentrefresh: '正在加载...',
					callback: pullupRefresh
				}
			}
		});
		/**
		 * 下拉刷新具体业务实现
		 */
		function pulldownRefresh() {
			pageIndex = 1;
			console.log('下拉刷新');
			setTimeout(function() {
				if (revData == null) {
					getaData();
				} else{
					showCacheData(revData)
				}
				mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
				mui('#pullrefresh').pullRefresh().refresh(true);
			}, 1000);
		}
		/**
		 * 上拉加载具体业务实现
		 */
		function pullupRefresh() {
			pageIndex = ++pageIndex;
			console.log('pageIndex = ' + pageIndex);
			console.log('上拉加载更多');
			setTimeout(function() {
				getaData()
			}, 1000);
		}
		if (mui.os.plus) {
			mui.plusReady(function() {
				setTimeout(function() {
					mui('#pullrefresh').pullRefresh().pulldownLoading(); 
				}, 500);
			});
		} else {
			mui.ready(function() {
				mui('#pullrefresh').pullRefresh().pulldownLoading();
			});
		}
		// 获取数据
		function getaData() {
			var timestamp = getDataStr();
			mui.ajax(baseUrl, {
				data: {
					key: '',
					typeId: '',
					showapi_appid: appid,
					showapi_sign: sign,
					showapi_timestamp: timestamp,
					page: pageIndex
				},
				dataType: 'json',
				type: 'post',  
				timeout: 10000,
				beforeSend: function(data) {
					plus.nativeUI.showWaiting(); 
				},
				success: function(data) {
					console.log("success");
					plus.nativeUI.closeWaiting();  
					if (data.showapi_res_code == 0) {
						console.log("成功");
						var dice1 = data.showapi_res_body;
						var dice2 = dice1.pagebean;
						var result = '';
						if (pageIndex == 1) { //下拉刷新需要先清空数据
							table.innerHTML = '';
						}
						allPages = dice2.allPages;
						revData = dice2.contentlist;
						mui.each(dice2.contentlist, function(index, item) {
							var li = document.createElement('li');
							li.url = item.url; /*详情url*/
							li.title = item.title; /*详情标题*/
							li.className = 'tableView-cell'; 
							
							li.innerHTML = '<div class="head-part">'
						    + '<img src="' + item.userLogo + '"/ id="headImage">'
							+ '<div class="about-auther">'
							+ '<div id="auther">'
							+ item.userName 
							+ '<span class="about-type">' + item.typeName + '</span></div><div id="currentDate">'
							+ item.date + '</div></div></div><div id="titleConcent">'
							+ '<img src=" '+ item.contentImg + '" id="mainImage"/><div id="titleConcent1">'
							+ item.title + '</div></div>';					
							table.appendChild(li, table.firstChild);
						});
						if(pageIndex < allPages){
							mui('#pullrefresh').pullRefresh().endPullupToRefresh(false);	/*能上拉*/
						}else{
							mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);/*不能上拉*/
						}
					}
				},
				error: function(xhr, type, errerThrown) {
					mui.toast('网络异常,请稍候再试');
					plus.nativeUI.closeWaiting();  
					mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
				}
			});
		}		
		// 显示缓存数据
		function showCacheData(rData){
			mui.each(rData, function(index, item) {
				var li = document.createElement('li');
				li.url = item.url; /*详情url*/
				li.title = item.title; /*详情标题*/
				li.className = 'tableView-cell'; 			
				li.innerHTML = '<div class="head-part">'
				+ '<img src="' + item.userLogo + '"/ id="headImage">'
				+ '<div class="about-auther">'
				+ '<div id="auther">'
				+ item.userName 
				+ '<span class="about-type">' + item.typeName + '</span></div><div id="currentDate">'
				+ item.date + '</div></div></div><div id="titleConcent">'
				+ '<img src=" '+ item.contentImg + '" id="mainImage"/><div id="titleConcent1">'
				+ item.title + '</div></div>';					
				table.appendChild(li, table.firstChild);
			});
		}
		
		//链接批量处理 页面跳转  
		var aniShow = "pop-in";
		mui('.mui-content').on('tap', 'li', function() {  
			console.log("detail-url -- >> " + this.url);  
			console.log("detail-title -- >> " + this.title);
			mui.openWindow({
				url: 'detail.html',
				id: 'detail',
				show: {
					aniShow: 'slide-in-right' /*页面切换效果*/
				},
				extras: {
					detailUrl: this.url,
					detailTitle: this.title
				},
			});
		});		
		
	function showUpdate(){
		if (update == 1) { /*服务器有更新数据或者第一次请求update=1*/
			// 显示网路数据
		} else{ /*服务器没有数据更新*/
			if (revData == null) { /*没有缓存*/
				// 显示网络数据
			} else{ /*有缓存*/
				//显示缓存数据
			}
		}
	}
		
		
	</script>
</html>